<template>
  <div class="find">
    <van-pull-refresh v-model="refreshing" @refresh="onrefresh">
      <!-- 导航栏 -->
      <van-nav-bar>
        <template #title>
          <h3>发现</h3>
        </template>
      </van-nav-bar>
      <!-- 面试技巧区域 -->
      <div class="one">
        <findcell title="面试技巧" path="/one"></findcell>
        <div class="items">
          <skill
            :item="item"
            v-for="(item, index) in technicList"
            :key="index"
          ></skill>
        </div>
      </div>
      <!-- 市场数据 -->
      <div class="two">
        <findcell title="市场数据" path="/one"></findcell>
        <div class="box">
          <div class="tag">
            <span>{{ city }}</span>
            <span>{{ position }}</span>
          </div>
          <div class="items">
            <div class="item" v-for="(item, index) in markList" :key="index">
              <div class="year">{{ item.year.slice(0, 5) }}</div>
              <div class="outter">
                <div
                  class="inner"
                  :style="{
                    width: Math.round((item.salary / topSalary) * 100) + '%'
                  }"
                >
                  ￥{{ item.salary }}
                </div>
              </div>
              <div class="pre">
                <div v-if="item.percent">
                  <i
                    v-if="item.percent < 0"
                    class="iconfont iconicon_xiajiang"
                    style="color: red"
                  ></i>
                  <i
                    v-else
                    class="iconfont iconicon_shangsheng"
                    style="color: green"
                  ></i>
                  <span>{{ item.percent }}%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="more">
            <span v-if="isopen === false" @click="open" class="word"
              >展开更多<i class="iconfont iconicon_zhankai"></i
            ></span>
            <span v-else @click="close" class="word"
              >收起更多<i class="iconfont myicon iconicon_zhankai"></i
            ></span>
          </div>
        </div>
      </div>
      <!-- 面经分享 -->
      <div class="three">
        <findcell title="面经分享" path="/shareList"></findcell>
        <div class="items">
          <share :item="item" v-for="(item, index) in shareList" :key="index" />
        </div>
      </div>
      <div class="bottom">-----------到底了-----------</div>
    </van-pull-refresh>
  </div>
</template>

<script>
import findcell from './findcell.vue'
import skill from './skill'
import share from './share'
// 导入获取数据的方法
import { getTechnicApi, getHotApi, getShareApi } from '../../../api/articles.js'
export default {
  name: 'find',
  components: {
    findcell,
    skill,
    share
  },
  data () {
    return {
      // 面试技巧
      technicList: [],
      // 市场数据
      hotList: [],
      // 城市
      city: '',
      // 岗位
      position: '',
      // 最高薪资
      topSalary: 0,
      // 用来保存渲染到页面上的市场数据
      markList: [],
      // 用户来标记是否展开
      isopen: false,
      // 面经分享列表
      shareList: [],
      // 表示下拉组件的下拉状态
      refreshing: false
    }
  },
  activated () {
    window.scrollTo(0, this.$route.meta.scrollTop)
  },
  created () {
    this.getTechnic()
    this.getHot()
    this.getShare()
  },
  methods: {
    // 下拉刷新时触发
    onrefresh () {
      // 清除数据
      this.technicList = []
      this.hotList = []
      this.city = ''
      this.position = ''
      this.topSalary = 0
      this.markList = []
      this.isopen = false
      this.shareList = []
      // 重新请求数据源
      this.getTechnic()
      this.getHot()
      this.getShare()
      // 将下拉组件状态改为 false
      this.refreshing = false
    },
    // 得到面经分享数据
    async getShare () {
      const res = await getShareApi({
        star: 0,
        limit: 3
      })
      this.shareList = res.data.list
    },
    close () {
      // 收起更多
      this.markList = this.hotList.slice(0, 4)
      // 设置标记
      this.isopen = false
    },
    open () {
      // 展开更多
      this.markList = this.hotList
      // 设置标记
      this.isopen = true
    },
    // 得到面试技巧
    async getTechnic () {
      var res = await getTechnicApi({
        start: 0,
        limit: 3
      })
      this.technicList = res.data.list
    },
    // 得到市场数据
    async getHot () {
      var res = await getHotApi()
      this.hotList = res.data.yearSalary.reverse()
      this.city = res.data.city
      this.position = res.data.position
      this.topSalary = res.data.topSalary
      this.markList = this.hotList.slice(0, 4)
    }
  }
}
</script>

<style lang="less" scoped>
.find {
  background-color: #f7f4f5;
  padding-bottom: 50px;
  .one {
    margin-top: 3px;
    background-color: #fff;
  }
  .two {
    margin-top: 10px;
    background-color: #fff;
    .box {
      padding: 0 15px;
      .tag {
        display: flex;
        flex-wrap: wrap;
        span {
          font-size: 14px;
          background-color: #eceaea;
          padding: 6px;
          margin-right: 10px;
          border-radius: 6px;
        }
      }
      .items {
        margin-top: 20px;
        .item {
          padding-bottom: 20px;
          font-size: 12px;
          display: flex;
          align-items: center;
          .year {
            width: 50px;
            text-align: center;
          }
          .outter {
            flex: 1;
            margin: 0 15px;
            background-color: #ebdfdf;
            border-radius: 4px;
            .inner {
              background-color: #fe6d67;
              border-radius: 4px;
              color: #fff;
              text-align: right;
              padding-right: 8px;
              box-sizing: border-box;
            }
          }
          .pre {
            width: 60px;
          }
        }
      }
      .more {
        font-size: 14px;
        padding-bottom: 20px;
        .word {
          color: #545671;
          display: flex;
          align-items: center;
          justify-content: center;
          .iconfont {
            font-size: 12px;
            margin-left: 5px;
          }
          .myicon {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .three {
    margin-top: 10px;
    background-color: #fff;
  }
  .bottom {
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #b4b4bd;
    font-size: 12px;
  }
}
</style>
